﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<title>杭州民宿网-账号密码登录</title>
	<base th:href="${#request.getContextPath()}+'/'">
<meta name="Keywords" content="杭州民宿预定">
<meta name="Description" content="杭州民宿预定">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta content="width='device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;'" name="viewport" />
<link rel="shortcut icon" type="image/x-icon" href="http://cdn.teemax.com.cn/hzminsu/images/favicon.ico" media="screen" />
<link rel="stylesheet" type="text/css" href="http://cdn.teemax.com.cn/hzminsu/css/common.css">
<!--[if lte IE 8]><link href="http://cdn.teemax.com.cn/hzminsu/css/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lte IE 7]><link href="http://cdn.teemax.com.cn/hzminsu/css/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<link rel="stylesheet" type="text/css" href="http://cdn.teemax.com.cn/hzminsu/css/user.css">
<link rel="stylesheet" type="text/css" href="http://cdn.teemax.com.cn/hzminsu/css/sweetalert.css" />
</head>
<body>
   <div class="fullBody loginbg">
       <div class="login">
       	    <div class="login_logo">
       	    	<img src="http://cdn.teemax.com.cn/hzminsu/images/index/logo.png">
       	    </div>
            <div class="login_box registbox js_userbox">	
            	<!--手机邮箱注册-->
                <div class="login_boxcon code_box">
                	<div class="login_boxcon_center">
	                	<div class="login_tab js_user_tab">
	                		<ul>
	                			<li id="phonesign">手机注册</li>
	                			<li id="emailsign">邮箱注册</li>
	                		</ul>
                            <div class="clear"></div>
	                	</div>
	                	<div class="login_form js_user_form" id="phonediv">
		            		<form class="infoForm">
		            			<p class="tel comm-margin">
		            				<label>手机号</label>
				                    <input type="text" onchange="checkPhone()" class="comminput tel-input" id="js_userPhone" placeholder="输入手机号">
				                    <span class="tip js_errortip" id="phonemsg"></span>
				                    <a class="haveaccount" href="userLogin.html">立即登录</a>
				                </p>

				                <p class="code comm-margin">
		            				<label>验证码</label>
				                    <input type="text" class="tel-code" id="js_regCode" placeholder="输入验证码">
				                    <span class="tip js_errortip"></span>
									<!--通过ajax获取验证码，放入隐藏域中-->
									<input type="hidden" id="code" value="">
				                    <input type="button" class="getcode" id="js_getsmscode" value="短信获取">
				                    <div class="clear"></div>
				                </p>
									<span id="msgerror"></span>
				                <p class="comm-margin">
                                    <input type="button" id="js_phoneRegist" class="submitReg" value="注册" />
				                </p>
				                <p class="passtip">
				                	<a class="loginlink" href="login">登录</a>
				                </p>
		            		</form>
	                	</div>
	                	<div class="login_form js_user_form" id="emaildiv" style="display:none">
		            		<form class="infoForm">
		            			<p class="email comm-margin">
		            				<label>邮&nbsp&nbsp&nbsp&nbsp箱</label>
				                    <input type="text" class="comminput email-input" id="js_regEmail" placeholder="输入邮箱">
									<span id="usertextmsg"></span>
				                    <span class="tip js_errortip"></span>
				                    <a class="haveaccount">立即登录</a>
				                </p>
				                <p class="comm-margin">
                                    <input type="button" id="js_emailRegist" class="submitReg" value="注册" />
				                </p>
				                <p class="passtip">
				                	<a class="loginlink" href="login">登录</a>
				                </p>
		            		</form>
	                	</div>
	                </div>
                </div>
                <!--验证码登录-->
               
            </div>
         </div>
   </div>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/require-config.js"></script>
<script type="text/javascript">
	
	$("#phonesign").click(function(){
		$("#emaildiv").hide();
		$("#phonediv").show();
	})
	$("#emailsign").click(function(){
		$("#phonediv").hide();
		$("#emaildiv").show();		
	})

	//验证码手机号格式正确性，并判断手机号是否已经注册
	function checkPhone() {
		var phone = document.getElementById('js_userPhone').value;
		if (!(/^1[3456789]\d{9}$/.test(phone))) {
			$("#phonemsg").text("号码格式错误!");
		}else{
			$("#js_userPhone").blur(function () {
				var phone = $("#js_userPhone").val();
				$.post("http://localhost:8989/SSOSERVER/user/verify",
						{"userName":phone},
						function (res) {
							if (res.ok) {
								$("#phonemsg").text("号码已被注册").css("color","red");
							}else{
								$("#phonemsg").text("");
							}
						});
			})
		}
	}

	//通过Ajax获取验证码
	$("#js_getsmscode").click(function () {
		var phone = $("#js_userPhone").val();
		$.post("http://localhost:8989/SSOSERVER/user/loginByPhone",
				{"phone":phone},
				function (res) {
					if (res.ok) {
						$("#code").val(res.data);
					}
				});
	})

	//验证输入的验证码是否正确
	$("#js_phoneRegist").click(function () {
		var code = $("#code").val();
		var inputCode = $("#js_regCode").val();
		alert(code);
		if (code == inputCode){
			var phone = $("#js_userPhone").val();
			$.post("http://localhost:8989/SSOSERVER/user/phoneRegist",
					{"phone":phone},
					function (res) {
						if (res.ok) {
							$("#msgerror").text(res.data).css("color","green");
						}
					});
		}else {
			$("#msgerror").text("验证码输入错误！").css("color","red");
		}
	})


	//验证邮箱格式是否正确，并验证是否已注册
	$("#js_regEmail").blur(function () {
		var email = $("#js_regEmail").val();
		var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		if(!(reg.test(email))){
			$("#usertextmsg").text("邮箱格式错误!").css("color","red");
		}else {
			$.post("http://localhost:8989/SSOSERVER/user/verify",
					{"userName": email},
					function (res) {
						if (res.ok) {
							$("#usertextmsg").text("邮箱已被注册").css("color", "red");
						} else {
							$("#usertextmsg").text("");
						}
					});
		}
	})

	//邮箱注册
	$("#js_emailRegist").click(function () {
		var email = $("#js_regEmail").val();
		$.post("http://localhost:8989/SSOSERVER/user/emailRegist",
				{"email":email},
				function (res) {
					if (res.ok) {
						window.location.href="login";
					}
				});
	})


</script>
